<template>
  <div class="register">
    <el-card class="register-card">
      <h2 style="text-align: center">注册</h2>
      <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules"  label-position="left" label-width="120px" class="register-form">
        <el-form-item label="用户名" prop="userName">
          <el-input
              v-model="registerForm.userName"
              type="text"
              auto-complete="off"
              placeholder="用户名"
              prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="loginPwd" label="登录密码">
          <el-input
              type="password"
              placeholder="用户密码长度必须介于 8 和 16 之间"
              v-model="registerForm.loginPwd"
              show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmLoginPwd" label="确认登录密码">
          <el-input
              type="password"
              placeholder="与上面的密码一致"
              v-model="registerForm.confirmLoginPwd"
              show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="cardType" label="证件类型">
          <el-select v-model="registerForm.cardType" placeholder="请选择证件类型">
            <el-option value="0" label="身份证"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="idNumber" label="证件号">
          <el-input
           type="text"
           placeholder="请输入证件号"
           v-model="registerForm.idNumber"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
          type="text"
          placeholder="请输入邮箱"
          v-model="registerForm.mail"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="住址">
          <el-input
              type="text"
              placeholder="请输入住址"
              v-model="registerForm.address"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="name" label="真实姓名">
          <el-input
              type="text"
              placeholder="请输入你的真实姓名"
              v-model="registerForm.name"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="payPwd" label="支付密码">
          <el-input
              type="password"
              placeholder="支付密码长度6位"
              v-model="registerForm.payPwd"
              show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPayPwd" label="确认支付密码">
          <el-input
              type="password"
              placeholder="与上面的密码一致"
              v-model="registerForm.confirmPayPwd"
              show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码">
          <el-input
            type="text"
            placeholder="请输入手机号码"
            v-model="registerForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="verificationCode" label="验证码">
          <el-input
            type="text"
            placeholder="验证码"
            v-model="registerForm.verificationCode"
            style="width: 70%;float: left"
          ></el-input>
          <el-button
              @click="getVerificationCode"
              style="width: 25%;float:right;"
              :disabled="disabled"
          >{{btnTxt}}</el-button>
        </el-form-item>

        <el-form-item style="width:100%;">
          <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 50%;margin-left: 60px"
              @click="handleRegister"
          >
            <span v-if="!loading">注册</span>
            <span v-else>注 册 中...</span>
          </el-button>
          &nbsp;&nbsp;
          <span>已有账号?</span>&nbsp;
          <router-link to="/login"><el-link type="primary">点击登录</el-link></router-link>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import {register,getVerificationCode} from "@/api/user";
import {isMobile} from "@/utils/validate";
export default {
  name: "index",
  data(){
    const equalToLoginPassword = (rule, value, callback) => {
      if (this.registerForm.loginPwd !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const equalToPayPassword = (rule, value, callback) => {
      if (this.registerForm.payPwd !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    let validatePhone = (rule,value,callback)=>{
      if (!value){
        callback(new Error('手机号不能为空'));
      }
      //使用正则表达式进行验证手机号码
      if (!isMobile(value)){
        callback(new Error('请输入正确的手机号码'));
      }
      //自定义校验规则 需要调用callback()函数！
      callback();
    };

    return{
      btnTxt: "获取验证码",
      disabled:false,
      loading:false,
      time: 0,
      registerForm:{
        userName:"",
        loginPwd:"",
        confirmLoginPwd: "",
        payPwd:"",
        confirmPayPwd:"",
        cardType: "",
        idNumber: "",
        phone: "",
        mail: "",
        address: "",
        name: "",
        verificationCode: ""
      },
      registerFormRules:{
        userName:[
          { required: true, trigger: "blur", message: "请输入用户名" }
        ],
        phone: [
          {required: true, trigger: "blur",validator:validatePhone}
        ],
        loginPwd:[
          { required: true, trigger: "blur", message: "请输入您的密码" },
          { min: 8, max: 16, message: '用户密码长度必须介于 8 和 16 之间', trigger: 'blur' }
        ],
        confirmLoginPwd: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToLoginPassword, trigger: "blur" }
        ],
        payPwd: [
          { required: true, trigger: "blur", message: "请输入您的支付密码" },
          { min: 6, max: 6, message: '支付密码的长度位6位', trigger: 'blur' }
        ],
        confirmPayPwd: [
          { required: true, trigger: "blur", message: "请再次输入您的支付密码" },
          { required: true, validator: equalToPayPassword, trigger: "blur" }
        ],
        cardType:[
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        idNumber:[
          { required: true, trigger: "blur", message: "请输入您的证件号码" },
        ],
        name:[
          { required: true, trigger: "blur", message: "请输入您的姓名" }
        ],
        verificationCode:[
          { required: true, trigger: "blur", message: "请输入验证码" }
        ]
      }
    }
  },
  methods:{
    //获取手机验证码的方法
    getVerificationCode(){
      //1.校验手机验证码
      if(!this.registerForm.phone){
        //手机号校验不通过
        this.$message({
          message: '请输入手机号码',
          type: 'warning'
        });
      }else if (!isMobile(this.registerForm.phone)){
        //此处失去焦点后自动触发手机校验柜子
      }else{
        //手机号校验通过
        this.time = 60;
        this.disabled = true;
        this.timer();//调用倒计时方法
        //TODO 发送axios请求
        getVerificationCode(this.registerForm.phone);
      }
    },
    handleRegister(){
      this.$refs.registerForm.validate(valid =>{
        if(valid){
          this.loading = true;
          const req ={
            userName:this.registerForm.userName,
            loginPwd:this.registerForm.loginPwd,
            payPwd:this.registerForm.payPwd,
            cardType: this.registerForm.cardType,
            idNumber: this.registerForm.idNumber,
            phone: this.registerForm.phone,
            mail: this.registerForm.mail,
            address: this.registerForm.address,
            name: this.registerForm.name,
            verificationCode: this.registerForm.verificationCode
          }
          register(req).then(res=>{
            const username = this.registerForm.userName;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() =>{
            this.loading = false;
            this.$refs["registerForm"].resetFields();
          })
        }
      })
    },
    //倒计时方法
    timer() {
      if (this.time > 0) {
        this.time--;
        console.log(this.time);
        this.btnTxt = this.time+ "s";
        setTimeout(this.timer, 1000);
      } else{
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },

  }

}
</script>

<style scoped>
.register{
  /*text-align: center;*/
}
.register-card{
  margin: 50px auto;
  width: 45%;
}
</style>
